<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <link rel="stylesheet" href="../css/nav.css" />
  <link rel="stylesheet" href="../css/content.css" />
</head>
<body>
<jsp:include page="nav.jsp"/>
<div class="content">
  <div class="top">
    <img id="product-image" src="" alt="产品图片"/>
    <dl>
      <dt id="name" data-id=""></dt>
      <dd id="price"></dd>
      <dd id="duration"></dd>
      <dd id="doctor"></dd>
      <dd>
        <form action="xiangqing.jsp" id="reservationForm">
          <input type="submit" value="+立即预约" id="submit"/>
        </form>
      </dd>
    </dl>
  </div>

  <div class="jianjie">
    <div class="txt"><p>简介</p></div>
    <div id="jianjie-img" class="jianjie_img"></div>
  </div>
</div>

</body>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    // 获取 URL 参数中的 id
    const urlParams = new URLSearchParams(window.location.search);
    const currentId = urlParams.get("id");

    if (!currentId) {
      console.error("URL 参数中缺少 id");
      return;
    }

    // 请求项目数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '../ServiceListServlet', true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      if (xhr.status === 200 && xhr.response) {
        var data = xhr.response;

        // 查找与当前 ID 匹配的项目
        var service = data.find(function(item) {
          return item.id == currentId;
        });

        if (!service) {
          console.error('未找到 ID 为 ' + currentId + ' 的项目');
          return;
        }

        // 更新页面内容
        document.getElementById("product-image").setAttribute("src", "../" + service.image);
        document.getElementById("name").textContent = service.name;
        document.getElementById("name").setAttribute("data-id", service.id);  // 给名字元素加上 data-id 属性
        document.getElementById("price").textContent = "价格：" + service.price + "元";
        document.getElementById("duration").textContent = "时长：" + service.time + " min";
        document.getElementById("doctor").textContent = "医师：" + service.doctor;

        // 更新简介
        var jianjieImgContainer = document.getElementById("jianjie-img");
        console.log(service.introduction);  // 打印到控制台，检查内容
        jianjieImgContainer.innerHTML = service.introduction;  // 使用 innerHTML 显示可能的 HTML 内容
      } else {
        console.error("请求失败: 状态 - " + xhr.status);
      }
    };
    xhr.onerror = function() {
      console.error("请求失败: 网络错误");
    };
    xhr.send();
  });

  // 设置立即预约按钮的点击事件
  document.getElementById('submit').addEventListener('click', function(event) {
    event.preventDefault();  // 阻止默认的表单提交行为

    var productName = document.getElementById('name').textContent;  // 根据页面动态获取产品名
    var productId = document.getElementById('name').getAttribute('data-id');

    // 构造带有查询参数的 URL
    var url = "xiangqing.jsp?productName=" + encodeURIComponent(productName) + "&productId=" + encodeURIComponent(productId);

    // 跳转到目标页面
    window.location.href = url;
  });
</script>

</html>
